<template>
  <view class="activity-page">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="header-title">外卖优惠活动</text>
    </view>

    <!-- 活动列表 -->
    <view class="activity-list">
      <view 
        class="activity-item" 
        v-for="(item, index) in activityList" 
        :key="index"
      >
        <!-- 活动基本信息 -->
        <view class="item-header">
          <text class="activity-name">{{ item.activity_name }}</text>
          <text class="activity-type" :class="{'type-discount': item.activity_type === 0, 'type-discount-rate': item.activity_type === 1}">
            {{ item.activity_type === 0 ? '满减' : '折扣' }}
          </text>
        </view>

        <!-- 活动时间 -->
        <view class="item-time">
          <text>活动时间：{{ formatTime(item.start_time) }} 至 {{ formatTime(item.end_time) }}</text>
        </view>

        <!-- 活动规则 -->
        <view class="item-rule">
          <text>规则说明：{{ item.rule_desc }}</text>
        </view>

        <!-- 活动状态 -->
        <view class="item-status" :class="{'status-active': item.is_active === 1}">
          <text>{{ item.is_active === 1 ? '进行中' : '已结束' }}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      activityList: [
        {
          activity_id: 1,
          store_id: 1,
          activity_name: "平台满50减10",
          activity_type: 0,
          start_time: "2025-09-01 00:00:00",
          end_time: "2025-10-31 23:59:59",
          rule_desc: "订单实付满50元可用，不限商家",
          is_active: 1
        },
        {
          activity_id: 2,
          store_id: 2,
          activity_name: "汉堡店满30减8",
          activity_type: 0,
          start_time: "2025-09-20 00:00:00",
          end_time: "2025-10-20 23:59:59",
          rule_desc: "仅限美味汉堡店（天河店）",
          is_active: 1
        },
        {
          activity_id: 3,
          store_id: 3,
          activity_name: "平台满20享9折",
          activity_type: 1,
          start_time: "2025-09-15 00:00:00",
          end_time: "2025-10-15 23:59:59",
          rule_desc: "订单实付满20元可用，折扣商品除外",
          is_active: 1
        }
      ]
    };
  },
  methods: {
    // 格式化时间（提取年月日）
    formatTime(timeStr) {
      if (!timeStr) return "";
      return timeStr.split(" ")[0];
    }
  }
};
</script>

<style scoped>
/* 页面整体样式 */
.activity-page {
  padding: 20rpx;
  background-color: #f8f8f8;
  min-height: 100vh;
}

/* 页面标题 */
.page-header {
  padding: 30rpx 0;
  border-bottom: 1px solid #eee;
  margin-bottom: 20rpx;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

/* 活动列表 */
.activity-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

/* 单个活动项 */
.activity-item {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 24rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

/* 活动基本信息 */
.item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.activity-name {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.activity-type {
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
  color: #fff;
}

.type-discount {
  background-color: #ff4d4f;
}

.type-discount-rate {
  background-color: #ffa940;
}

/* 活动时间 */
.item-time {
  font-size: 26rpx;
  color: #666;
  margin-bottom: 16rpx;
}

/* 活动规则 */
.item-rule {
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
  margin-bottom: 16rpx;
}

/* 活动状态 */
.item-status {
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
  display: inline-block;
}

.status-active {
  background-color: #36cbcb;
  color: #fff;
}
</style>